<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 避免使用，class,id选择器 -->
    <style>

        /*!* ul的第一个子元素 *!*/
        /*ul li:first-child{*/
        /*    background: #cd9595;*/
        /*}*/

        /* ul的最后一个子元素 */
        ul li:last-child{
            background: aquamarine;
        }

        /* 选择p1:定位到父元素，选择父元素的第一个子元素
        选择当前p元素的所有父级元素，选中父级元素的第一个子元素，并且是当前元素才生效
        */
        /*p:nth-child(1){
            background: cornflowerblue;
        }*/

        /* 选择p1:定位到父元素，选择父元素当前类型的第一个子元素
        选择当前p元素的所有父级元素，选中父级元素第一个当前类型的子元素，并且是当前元素才生效
        */
        p:nth-of-type(1){
            background: darkgreen;
        }

    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
    <li>
        <p>p7</p>
    </li>
</ul>

<h1>标签</h1>

</body>
</html>